window.addEventListener('load', function () {

    function fn2() {

        let arr = [1, 2, 3, 4, 5, 6, 7, 8,'下一页'];

        let sHTML = '';

        arr.forEach(function (v) {

            // console.log(v);

            sHTML += `
            <a>${v}</a>
            `;

        })

        page.innerHTML = sHTML;



        let dom = page.firstElementChild;

        // console.log(dom);

        dom.className = "active";

        let pageDom = getEleAll("#page a");

        // console.log(pageDom);

        for (let i = 0; i < pageDom.length; i++) {

            // console.log(pageDom[i]);

            pageDom[i].addEventListener("mouseover", function () {

                for (let j = 0; j < pageDom.length; j++) {

                    pageDom[j].className = '';

                }

                this.className = 'active';

            })

            pageDom[i].addEventListener("mouseout", function () {

                this.className = '';

            })

        }

    }

    fn2();

    function fn3() {

        let arr = [
            { name: '全部', keywords: '身份验证', isBold: false },
            { name: '生活服务', keywords: '生活', isBold: false },
            { name: '金融科技', keywords: '钱', isBold: false },
            { name: '交通地理', keywords: '地点', isBold: false },
            { name: '充值缴费', keywords: '交钱', isBold: false },
            { name: '数据智能', keywords: 'AI', isBold: false },
            { name: '企业工商', keywords: '企业', isBold: false },
            { name: '应用开发', keywords: '开发', isBold: false },
            { name: '电子开发', keywords: '开发', isBold: false },
            { name: '吃喝玩乐', keywords: '耍', isBold: false },
            { name: '文娱视频', keywords: '视频', isBold: false },
            { name: '免费接口大全', keywords: '接口', isBold: true },
            { name: '短信', keywords: '验证码', isBold: false },
            { name: '汽车', keywords: '品牌', isBold: false },
            { name: '核验', keywords: '核验', isBold: false },
            { name: '最新发布', keywords: '最新', isBold: true },
            { name: 'API私有化部署', keywords: 'API', isBold: true }
        ]

        // console.log(arr);

        arr.forEach(function (v) {

            // console.log(v);

            // 创建标签
            let dom = document.createElement('a');

            // 添加自定义属性
            dom.setAttribute('keywords', v.keywords);

            // 添加文本
            dom.innerHTML = v.name;

            // 判定
            if (v.isBold) {
                dom.className = 'fbold';
            }

            // console.log(dom);

            // 添加类名
            let classDom = getEle('#class');

            // 追加节点
            classDom.appendChild(dom);

        })

    }

    fn3();

    function fn() {

        let classDom = getEleAll('#class a');

        // console.log(classDom);

        let classflyDom = getEle('#class');

        classflyDom.firstElementChild.classList.add('active');

        classDom.forEach(function (v) {

            // console.log(v);

            v.addEventListener('click', function () {

                // console.log(111);

                let nameDom = this.textContent;
                let keywordsDom = this.getAttribute('keywords');

                // console.log(nameDom);

                tittle.innerHTML = nameDom;
                key.placeholder = keywordsDom;

                classDom.forEach(function(vv){

                    vv.classList.remove('active');

                })

                v.classList.add('active')

            })

        })

    }

    fn();

    let arr = [
        // 1
        {imgUrl:'./img/API_01.jpg',desc:'2021出行防疫政策指南',pirce:'免费',btn:'申请数据',stittle:false},
        {imgUrl:'./img/API_02.jpg',desc:'身份证实名认证',pirce:'￥0.2000/次',btn:'申请数据',stittle:true},
        {imgUrl:'./img/API_03.jpg',desc:'天气预报',pirce:'免费',btn:'申请数据',stittle:false},
        {imgUrl:'./img/API_04.jpg',desc:'银行卡四元素校验',pirce:'￥0.3360/次',btn:'申请数据',stittle:true},
        {imgUrl:'./img/API_05.jpg',desc:'短信API服务',pirce:'￥0.0400/次',btn:'申请数据',stittle:true},
        // 2
        {imgUrl:'./img/API_01.jpg',desc:'2021出行防疫政策指南',pirce:'免费',btn:'申请数据',stittle:false},
        {imgUrl:'./img/API_02.jpg',desc:'身份证实名认证',pirce:'￥0.2000/次',btn:'申请数据',stittle:true},
        {imgUrl:'./img/API_03.jpg',desc:'天气预报',pirce:'免费',btn:'申请数据',stittle:false},
        {imgUrl:'./img/API_04.jpg',desc:'银行卡四元素校验',pirce:'￥0.3360/次',btn:'申请数据',stittle:true},
        {imgUrl:'./img/API_05.jpg',desc:'短信API服务',pirce:'￥0.0400/次',btn:'申请数据',stittle:true},
        // 3
        {imgUrl:'./img/API_01.jpg',desc:'2021出行防疫政策指南',pirce:'免费',btn:'申请数据',stittle:false},
        {imgUrl:'./img/API_02.jpg',desc:'身份证实名认证',pirce:'￥0.2000/次',btn:'申请数据',stittle:true},
        {imgUrl:'./img/API_03.jpg',desc:'天气预报',pirce:'免费',btn:'申请数据',stittle:false},
        {imgUrl:'./img/API_04.jpg',desc:'银行卡四元素校验',pirce:'￥0.3360/次',btn:'申请数据',stittle:true},
        {imgUrl:'./img/API_05.jpg',desc:'短信API服务',pirce:'￥0.0400/次',btn:'申请数据',stittle:true},
        // 4
        {imgUrl:'./img/API_01.jpg',desc:'2021出行防疫政策指南',pirce:'免费',btn:'申请数据',stittle:false},
        {imgUrl:'./img/API_02.jpg',desc:'身份证实名认证',pirce:'￥0.2000/次',btn:'申请数据',stittle:true},
        {imgUrl:'./img/API_03.jpg',desc:'天气预报',pirce:'免费',btn:'申请数据',stittle:false},
        {imgUrl:'./img/API_04.jpg',desc:'银行卡四元素校验',pirce:'￥0.3360/次',btn:'申请数据',stittle:true},
        {imgUrl:'./img/API_05.jpg',desc:'短信API服务',pirce:'￥0.0400/次',btn:'申请数据',stittle:true},
        // 5
        {imgUrl:'./img/API_01.jpg',desc:'2021出行防疫政策指南2',pirce:'免费',btn:'申请数据',stittle:false},
        {imgUrl:'./img/API_02.jpg',desc:'身份证实名认证2',pirce:'￥0.2000/次',btn:'申请数据',stittle:true},
        {imgUrl:'./img/API_03.jpg',desc:'天气预报2',pirce:'免费',btn:'申请数据',stittle:false},
        {imgUrl:'./img/API_04.jpg',desc:'银行卡四元素校验2',pirce:'￥0.3360/次',btn:'申请数据',stittle:true},
        {imgUrl:'./img/API_05.jpg',desc:'短信API服务2',pirce:'￥0.0400/次',btn:'申请数据',stittle:true},
        // 6
        {imgUrl:'./img/API_01.jpg',desc:'2021出行防疫政策指南',pirce:'免费',btn:'申请数据',stittle:false},
        {imgUrl:'./img/API_02.jpg',desc:'身份证实名认证',pirce:'￥0.2000/次',btn:'申请数据',stittle:true},
        {imgUrl:'./img/API_03.jpg',desc:'天气预报',pirce:'免费',btn:'申请数据',stittle:false},
        {imgUrl:'./img/API_04.jpg',desc:'银行卡四元素校验',pirce:'￥0.3360/次',btn:'申请数据',stittle:true},
        {imgUrl:'./img/API_05.jpg',desc:'短信API服务',pirce:'￥0.0400/次',btn:'申请数据',stittle:true},
        // 7
        {imgUrl:'./img/API_01.jpg',desc:'2021出行防疫政策指南',pirce:'免费',btn:'申请数据',stittle:false},
        {imgUrl:'./img/API_02.jpg',desc:'身份证实名认证',pirce:'￥0.2000/次',btn:'申请数据',stittle:true},
        {imgUrl:'./img/API_03.jpg',desc:'天气预报',pirce:'免费',btn:'申请数据',stittle:false},
        {imgUrl:'./img/API_04.jpg',desc:'银行卡四元素校验',pirce:'￥0.3360/次',btn:'申请数据',stittle:true},
        {imgUrl:'./img/API_05.jpg',desc:'短信API服务',pirce:'￥0.0400/次',btn:'申请数据',stittle:true},
        // 8
        {imgUrl:'./img/API_01.jpg',desc:'2021出行防疫政策指南',pirce:'免费',btn:'申请数据',stittle:false},
        {imgUrl:'./img/API_02.jpg',desc:'身份证实名认证',pirce:'￥0.2000/次',btn:'申请数据',stittle:true},
        {imgUrl:'./img/API_03.jpg',desc:'天气预报',pirce:'免费',btn:'申请数据',stittle:false},
        {imgUrl:'./img/API_04.jpg',desc:'银行卡四元素校验',pirce:'￥0.3360/次',btn:'申请数据',stittle:true},
        {imgUrl:'./img/API_05.jpg',desc:'短信API服务',pirce:'￥0.0400/次',btn:'申请数据',stittle:true},
        // 9
        {imgUrl:'./img/API_01.jpg',desc:'2021出行防疫政策指南3',pirce:'免费',btn:'申请数据',stittle:false},
        {imgUrl:'./img/API_02.jpg',desc:'身份证实名认证3',pirce:'￥0.2000/次',btn:'申请数据',stittle:true},
        {imgUrl:'./img/API_03.jpg',desc:'天气预报3',pirce:'免费',btn:'申请数据',stittle:false},
        {imgUrl:'./img/API_04.jpg',desc:'银行卡四元素校验3',pirce:'￥0.3360/次',btn:'申请数据',stittle:true},
        {imgUrl:'./img/API_05.jpg',desc:'短信API服务3',pirce:'￥0.0400/次',btn:'申请数据',stittle:true},
        // 10
        {imgUrl:'./img/API_01.jpg',desc:'2021出行防疫政策指南3',pirce:'免费',btn:'申请数据',stittle:false},
        {imgUrl:'./img/API_02.jpg',desc:'身份证实名认证3',pirce:'￥0.2000/次',btn:'申请数据',stittle:true},
        {imgUrl:'./img/API_03.jpg',desc:'天气预报3',pirce:'免费',btn:'申请数据',stittle:false},
        {imgUrl:'./img/API_04.jpg',desc:'银行卡四元素校验3',pirce:'￥0.3360/次',btn:'申请数据',stittle:true},
        {imgUrl:'./img/API_05.jpg',desc:'短信API服务3',pirce:'￥0.0400/次',btn:'申请数据',stittle:true},
        // 11
        {imgUrl:'./img/API_01.jpg',desc:'2021出行防疫政策指南',pirce:'免费',btn:'申请数据',stittle:false},
        {imgUrl:'./img/API_02.jpg',desc:'身份证实名认证',pirce:'￥0.2000/次',btn:'申请数据',stittle:true},
        {imgUrl:'./img/API_03.jpg',desc:'天气预报',pirce:'免费',btn:'申请数据',stittle:false},
        {imgUrl:'./img/API_04.jpg',desc:'银行卡四元素校验',pirce:'￥0.3360/次',btn:'申请数据',stittle:true},
        {imgUrl:'./img/API_05.jpg',desc:'短信API服务',pirce:'￥0.0400/次',btn:'申请数据',stittle:true},
        // 12
        {imgUrl:'./img/API_01.jpg',desc:'2021出行防疫政策指南',pirce:'免费',btn:'申请数据',stittle:false},
        {imgUrl:'./img/API_02.jpg',desc:'身份证实名认证',pirce:'￥0.2000/次',btn:'申请数据',stittle:true},
        {imgUrl:'./img/API_03.jpg',desc:'天气预报',pirce:'免费',btn:'申请数据',stittle:false},
        {imgUrl:'./img/API_04.jpg',desc:'银行卡四元素校验',pirce:'￥0.3360/次',btn:'申请数据',stittle:true},
        {imgUrl:'./img/API_05.jpg',desc:'短信API服务',pirce:'￥0.0400/次',btn:'申请数据',stittle:true}
        
    ];

    let pages = 0;  //开始索引值
    let sPage = 20;  //每页显示的条数

    // console.log(pageVal);


    function rander(pages,sPage){
        // 用变量接截取后的数组
        let pageVal = arr.slice(pages,sPage);

        let listHTML = '';

        let listDom = getEle('#list');

        // 对截取的数组进行遍历
        pageVal.forEach(function(v){

            // console.log(v);

            listHTML+=`
                <li class="rel">
                    <a href="#">
                        <span class="stittle ${v.stittle?'on':''} f12 c00b">企业专用</span>
                        <img src=${v.imgUrl} alt="">
                        <p class="desc">${v.desc}</p>
                        <p class="${v.pirce=='免费'?'free':'money'}">${v.pirce}</p>
                        <button>${v.btn}</button>
                    </a>
                </li>
            `;

            listDom.innerHTML=listHTML;

        })

    }

    rander(pages,sPage);


    // 页码的点击事件
    let page_a = getEleAll('#page a');

    // console.log(page_a);

    page_a.forEach(function(v){

        // console.log(v);

        v.addEventListener('click',function(){

            // alert(1);

            let page_html = this.innerHTML;

            // console.log(page_html);

            pages = (page_html - 1) * sPage;

            // console.log(pages);

            // rander(pages,pages * sPage);


            // let page_b = page_html - 1;

            // pages = page_b * sPage;

            rander(pages,page_html * sPage);

        })

    })

})